<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:110px' }"
    :wrapper-col="{ style: 'calc(100% - 110px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-spin :spinning="loading">
      <div class="title">基础信息</div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="客户简称" name="shortName" :rules="[{ required: true, message: '请填写客户简称!' }]">
            <a-input v-model:value="formState.shortName" :maxlength="50" placeholder="请输入" @change="changeAccountName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="经营单位" name="companyId" :rules="[{ required: true, message: '请选择经营单位!' }]">
            <a-select v-model:value="formState.companyId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in companyOpts" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="跟单" name="followId" :rules="[{ required: true, message: '请选择跟单!' }]">
            <a-select v-model:value="formState.followId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in followOpts" :key="item.id" :label="item.username" :value="item.id">{{ item.username }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="业务员" name="bizId" :rules="[{ required: true, message: '请选择业务员!' }]">
            <a-select v-model:value="formState.bizId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in bizOpts" :key="item.id" :label="item.username" :value="item.id">{{ item.username }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="账期" name="accountPeriodId" :rules="[{ required: true, message: '请选择账期!' }]">
            <a-select v-model:value="formState.accountPeriodId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in accountPeriodOpts" :key="item.id" :label="item.accountName" :value="item.id">{{ item.accountName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="逾期扣货" name="isRelease" :rules="[{ required: true, message: '请选择逾期扣货!' }]">
            <a-select v-model:value="formState.isRelease" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option label="启用" :value="0">启用</a-select-option>
              <a-select-option label="停用" :value="1">停用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="财务" name="finId" :rules="[{ required: true, message: '请选择财务!' }]">
            <a-select v-model:value="formState.finId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in finOpts" :key="item.id" :label="item.username" :value="item.id">{{ item.username }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="客户等级" name="levelId" :rules="[{ required: true, message: '请选择客户等级!' }]">
            <a-select v-model:value="formState.levelId" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in customLevelOpts" :key="item.id" :label="item.customerLevel" :value="item.id">{{ item.customerLevel }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态!' }]">
            <a-select v-model:value="formState.status" placeholder="请输入">
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">停用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计费时间节点" name="billingTimeType" :rules="[{ required: true, message: '请选择计费时间节点!' }]">
            <a-select v-model:value="formState.billingTimeType" :filter-option="filterOption" showSearch placeholder="请输入">
              <a-select-option v-for="item in dataDict['BILL_TIME_NODE']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item label="登录账号" name="accountName" :rules="[{ required: true, message: '请填写登录账号!' }]">
            <a-input v-model:value="formState.accountName" :maxlength="20" placeholder="请输入" />
            <a-button type="link">重置密码</a-button>
          </a-form-item>
          <a-form-item label="重置密码">
            <a-button type="link" @click="resetPasswordHandle">重置密码</a-button>
          </a-form-item>
        </a-col> -->
      </a-row>
      <div class="title">认证资料</div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="公司名称" name="companyName" :rules="[{ required: true, message: '请填写公司名称!' }]">
            <a-input v-model:value="formState.companyName" :maxlength="50" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="公司法人" name="companyLegalPerson" :rules="[{ required: true, message: '请填写公司法人!' }]">
            <a-input v-model:value="formState.companyLegalPerson" :maxlength="20" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item label="省/市/区" name="address" :rules="[{ required: true, message: '请选择省/市/区!' }]">
            <a-cascader
              v-model:value="formState.address"
              :fieldNames="{ label: 'name', value: 'id', children: 'child' }"
              change-on-select
              :options="baseStore.provincesOpts"
              :show-search="{ filter }"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item label="详细地址" name="addressDetails" :rules="[{ required: true, message: '请填写详细地址!' }]">
            <a-input v-model:value="formState.addressDetails" :maxlength="100" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="营业执照号码" name="businessLicenseNumber" :rules="[{ required: true, message: '请填写营业执照号码!' }]">
            <a-input v-model:value="formState.businessLicenseNumber" @keyup="validateZhInputHandle($event, formState, ['businessLicenseNumber'])" :maxlength="20" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="营业执照" name="businessLicenseUrlList" :rules="[{ required: true, message: '请上传营业执照!' }]">
            <UploadFile mode="/parent/" v-model:value="formState.businessLicenseUrlList" :maxCount="5" list-type="picture-card">
              <plus-outlined></plus-outlined>
            </UploadFile>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="title">联系人</div>
      <a-row :gutter="16" style="margin-bottom: 48px">
        <template v-for="(item, index) in formState.contactList" :key="index">
          <a-col :span="10">
            <a-form-item label="联系人" :name="['contactList', index, 'name']" :rules="[{ required: true, message: '请填写联系人!' }]">
              <a-input v-model:value="item.name" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item
              label="联系电话"
              :name="['contactList', index, 'phone']"
              :rules="[
                { required: true, message: '请填写联系电话!' },
                // { min: 11, message: '最少11位数手机号!', trigger: 'blur' },
                { validator: validatePhone, trigger: 'blur' }
              ]"
            >
              <a-input v-model:value="item.phone" :maxlength="11" @keyup="validatePhoneInputHandle($event, item, ['phone'])" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button v-debounce @click="addContactHandle" style="margin-right: 8px"><plus-outlined /></a-button>
            <a-button v-if="formState.contactList.length > 1" @click="deleteContactHandle(index)" danger><minus-outlined /></a-button>
          </a-col>
          <a-col :span="10">
            <a-form-item label="地址" :name="['contactList', index, 'address']" :rules="[{ required: false, message: '请填写地址!' }]">
              <a-input v-model:value="item.address" :maxlength="100" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="邮箱" :name="['contactList', index, 'phone']" :rules="[{ required: false, message: '请填写邮箱!' }]">
              <a-input v-model:value="item.email" :maxlength="20" @keyup="validateZhInputHandle($event, item, ['email'])" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-spin>
    <a-form-item :wrapper-col="{ span: 24 }" class="submit-btn-form-item">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
// import baseStore from "@/store/modules/base";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getCustomerInfoApi } from "@/api/managementCenter/customerManagement";
// import { message } from "ant-design-vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: CustomerManagement.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const {
  // filter,
  dataDict,
  formDataRef,
  formState,
  companyOpts,
  getAllCompany,
  followOpts,
  getAllFollow,
  bizOpts,
  getAllBiz,
  accountPeriodOpts,
  getAllAccountPeriod,
  getAllFin,
  finOpts,
  customLevelOpts,
  getAllCustomerLevel,
  loading
} = InitHook();
const {
  onFinish,
  resetFields,
  filterOption,
  onFinishFailed,
  validateZhInputHandle,
  resetHandle,
  addContactHandle,
  deleteContactHandle,
  changeAccountName,
  validatePhoneInputHandle,
  validatePhone
  // resetPasswordHandle
} = OperationHook({
  formDataRef,
  formState,
  passData,
  type,
  emit
});
const init = () => {
  getAllCompany();
  getAllFollow();
  getAllBiz();
  getAllAccountPeriod();
  getAllFin();
  getAllCustomerLevel();
  if (type.value === 2) {
    loading.value = true;
    getCustomerInfoApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          if (!formState.contactList || formState.contactList.length === 0) {
            formState.contactList = [
              {
                name: undefined,
                phone: undefined,
                address: undefined,
                email: undefined
              }
            ];
          }
          // formState.address = formState.address.split("/");
        }
      })
      .finally(() => (loading.value = false));
  }
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.submit-btn-form-item{
    position: absolute;
    width: 100%;
    padding: 12px;
    bottom: 0px;
    left: 0px;
    text-align: center;
    background-color: #fff;
}
</style>
